<style>
  * {
    margin: 0;
    padding: 0;
  }
  .button {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background-color: #44c767;
    border: 1px solid #18ab29;
    display: inline-block;
    cursor: pointer;
    color: #ffffff;
    font-family: Arial;
    font-size: 16px;
    text-decoration: none;
    text-shadow: 0px 1px 0px #2f6627;
  }
  .button:hover {
    background-color: #5cbf2a;
  }
  .button:active {
    position: relative;
    top: 1px;
  }

  .j_center {
    display: flex;
    justify-content: center;
  }
  .pd_4 {
    padding: 2rem;
  }
  .mr_4 {
    margin-right: 4rem;
  }
</style>
<div id="app">
  <div class="pd_4 j_center" v-for="(day) in days" :key="day.id">
    <div class="mr_4">{{day.id}}</div>
    <div>{{day.tFucked}}</div>
  </div>
  <div class="j_center">
    <button class="button" @click="fuck">{{fucked}}</button>
  </div>
</div>
<script src="./vue.js"></script>
<script>
  const SHUWAN9_BORN_FUCK_UP = "shuwan9_born_fuck_up";
  const SHUWAN9_BORN_FUCK_UP_TODAY = "shuwan9_born_fuck_up_today";
  function getDay() {
    const today = new Date();
    return `${today.getFullYear()}-${("0" + (today.getMonth() + 1)).slice(
      -2
    )}-${("0" + today.getDate()).slice(-2)}`;
  }
  new Vue({
    data: {
      fucked: 0,
      days: [],
    },
    created() {
      this.init();
    },
    methods: {
      init() {
        this.days = JSON.parse(localStorage.getItem(SHUWAN9_BORN_FUCK_UP));
        this.fucked = ~~localStorage.getItem(SHUWAN9_BORN_FUCK_UP_TODAY);
      },
      save() {
        localStorage.setItem(SHUWAN9_BORN_FUCK_UP, JSON.stringify(this.days));
        localStorage.setItem(SHUWAN9_BORN_FUCK_UP_TODAY, this.fucked);
      },
      fuck() {
        let today = this.days.find((i) => i.id == getDay()) || {
          id: getDay(),
          tFucked: 0,
        };
        if (!today) {
          this.days.push(today);
        }
        if (this.fucked == 4) {
          today.tFucked++;
          this.fucked = 0;
        } else {
          this.fucked++;
        }
        this.save();
      },
    },
  }).$mount(document.querySelector("#app"));
</script>
